<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{ title }}</h2>
      <div v-if="true">
        <h2 v-once>msg -- {{msg}}</h2>
        <p>
          <input type="text" v-model="msg" />
        </p>
        <h2>count -- {{count}}</h2>
        <button v-on:click="changecount">修改 count</button>
        <h2 v-text="title" v-bind:data-title="title"></h2>
        <div v-html="tag"></div>
        <img v-if="flag" :src="img" alt="" width="200" height="200" />
        <button @click="flag=!flag">点击切换</button>
      </div>
      <div>
        <h2>计算属性 - computed</h2>
        <h2>text == {{text}}</h2>
        <h2>text (reverse) = {{ text.split('').reverse().join('')}}</h2>
        <h2>reverText - {{reverText}}</h2>
        <div>
          <h4>计算属性 vs methods</h4>
          <h4>
            <h2>computed - {{mytext}}</h2>
          </h4>
          <h2>methods - {{getText()}}</h2>
          <p>
            <input type="text" v-model="text" />
          </p>
        </div>
        <div>
          <h4>watch</h4>
          <p>firstName:<input type="text" v-model="firstName" /></p>
          <p>lastName:<input type="text" v-model="lastName" /></p>
          <p>fullName:{{fullName}}</p>
          <p>myName:{{myName}}</p>
          <p>newName:{{newName}}</p>
        </div>
        <div>
          <h4>smallNum --{{smallNum}}</h4>
          <h4>bigNum --{{bigNum}}</h4>
          <button @click="smallNum = 3000">smallNum = 3000</button>
          <button @click="bigNum = 4800">bigNum = 4800</button>
        </div>
      </div>
    </div>
    <script>
      const vm = new Vue({
        data: {
          title: "Vue 模板语法 + 计算属性",
          msg: "wh2116 - daydayup",
          count: 2000,
          tag: "<h1>我们每天不一样...</h1>",
          img: "http://47.104.209.44/base/imgs/1.jpg",
          flag: true,
          text: "WH2116 - Work Hard for offer",
          fullName: "",
          firstName: "hello",
          lastName: "word",
          smallNum: 800,
        },
        watch: {
          count(v) {
            console.log(v);
          },
          firstName(v) {
            this.fullName = v + "&" + this.lastName;
          },
          lastName(v) {
            this.fullName = this.firstName + "&" + v;
          },
        },
        computed: {
          reverText() {
            return this.text.split("").reverse().join("");
          },
          mytext() {
            return (
              this.text.split("").reverse().join("") +
              " -  " +
              new Date().getSeconds()
            );
          },
          myName() {
            return this.firstName + "%" + this.lastName;
          },
          newName: {
            get() {
              return this.firstName + "#" + this.lastName;
            },
            set(v) {
              console.log(v);
              var names = v.split("#");
              this.firstName = names[0];
              this.lastName = names[1];
            },
          },
          bigNum: {
            get() {
              return this.smallNum + 3000;
            },
            set(v) {
              this.smallNum = v;
            },
          },
        },
        methods: {
          getText() {
            return (
              this.text.split("").reverse().join("") +
              "-" +
              new Date().getSeconds()
            );
          },
          changecount() {
            this.count += 10;
          },
        },
        mounted() {
          document.querySelectorAll("title")[0].innerHTML = this.title;
          this.fullName = this.firstName + "&" + this.lastName;
        },
      }).$mount("#app");

      vm.$watch("text", (v, oldv) => {
        console.log(v);
      });
    </script>
  </body>
</html>
